<template>
    <div class="crystal">
        <div class="retail d-none d-lg-block">
            <div class="up">
                <img src="@static/ability/retail.png">
            </div>
            <div class="down">
                <img src="@static/ability/market_icon.png">
            </div>
        </div>
        <div class="retail_block d-lg-none">
            <div class="up">
                <img src="@static/ability/retail.png">
            </div>
            <div class="down">
                <img src="@static/ability/market_icon.png">
            </div>
        </div>

        <div class="wrap d-none d-lg-block">
            <div class="graphical">
                <div class="title">
                    <img src="@static/ability/crystal_title.png">
                </div>
                <div class="content">
                    <div class="message">
                        <div class="tit">
                            <img src="@static/ability/crystal_one.png">
                        </div>
                        <div class="descript">
                            商品分析:分析商品趋势、表现，寻找增长点:流量分析:分析流量渠道分布与质量，监控市场
                            洞察:洞察行业趋势与细分增长点:交易分析、会员分析、粉丝分析
                        </div>
                    </div>
                    <div class="target">
                        <div class="tit">
                            <img src="@static/ability/crystal_two.png">
                        </div>
                        <div class="descript">
                            通过用户行为数据抽象，刻画用户画像;连接广告;完成精准定向投放;连接SCRM;分析人
                            群画像;锁定目标人群精准营销。

                        </div>
                    </div>
                    <div class="intelligence">
                        <div class="tit">
                            <img src="@static/ability/crystal_three.png">
                        </div>
                        <div class="descript">
                            个性化推荐:通过大数据，千人干面推荐商品:智能VIP等级:结合行业知识沉淀，输出会员分
                            层策略，指导客户科学运营。
                        </div>
                    </div>
                </div>
            </div>
            <div class="crystal_bg" >
                <img src="@static/ability/crystal.png">
            </div>
        </div>
        <div class="wrap_block d-lg-none">
            <div class="graphical">
                <div class="title">
                    <img src="@static/ability/crystal_title.png">
                </div>
                <div class="content">
                    <div class="message">
                        <div class="tit">
                            <img src="@static/ability/crystal_one.png">
                        </div>
                        <div class="descript">
                            商品分析:分析商品趋势、表现，寻找增长点:流量分析:分析流量渠道分布与质量，监控市场
                            洞察:洞察行业趋势与细分增长点:交易分析、会员分析、粉丝分析
                        </div>
                    </div>
                    <div class="message">
                        <div class="tit">
                            <img src="@static/ability/crystal_two.png">
                        </div>
                        <div class="descript">
                            通过用户行为数据抽象，刻画用户画像;连接广告;完成精准定向投放;连接SCRM;分析人
                            群画像;锁定目标人群精准营销。

                        </div>
                    </div>
                    <div class="message">
                        <div class="tit">
                            <img src="@static/ability/crystal_three.png">
                        </div>
                        <div class="descript">
                            个性化推荐:通过大数据，千人干面推荐商品:智能VIP等级:结合行业知识沉淀，输出会员分
                            层策略，指导客户科学运营。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
        }
    }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
    .crystal{
        width:100% !important
        height:800px !important 
        position:relative !important
        // margin-top:
        .retail_block{
            // float:left !important

            width:338px !important
            height:338px !important
            margin:0 5% !important
            position:relative
            .up{
                width:100%
                z-index:1
                position:absolute
                left:0
                top:0
                img{
                    width:100%
                    height:100%
                }
            }
            .down{
                width:98% 
                height:335px !important
                z-index:2
                position:absolute
                top: 50%
                left: 50%
                transform:translate(-50%,-50%)
                img{
                    width:100%
                    height:100%
                }
            }
        }
        .wrap_block{
            position:absolute !important
            top:400px !important
            height:400px !important

            .graphical{
                width:90% !important
                margin:0 5% !important
                height: 300px !important
                .title{
                    width:150px
                    height:28px
                    margin-bottom:20px

                }
                .content{
                    height:
                    .message{
                        .tit{
                            width:200px
                            margin-bottom:20px
                        }
                        .descript{
                             margin-bottom:20px
                        }
                    }
                }
            }
        }
    }
}
@media (min-width: 992px) {
    .crystal{
        width:100% !important
        height:2000px !important 
        position:relative !important
        .retail_block{
            // float:left !important

            width:338px !important
            height:338px !important
            margin:0 5% !important
            position:relative
            .up{
                width:100%
                z-index:1
                position:absolute
                left:0
                top:0
                img{
                    width:100%
                    height:100%
                }
            }
            .down{
                width:98% 
                height:335px !important
                z-index:2
                position:absolute
                top: 50%
                left: 50%
                transform:translate(-50%,-50%)
                img{
                    width:100%
                    height:100%
                }
            }
        }
        .wrap_block{
            position:absolute !important
            top:400px !important
            height:400px !important

            .graphical{
                width:90% !important
                margin:0 5% !important
                height: 800px !important
                .title{
                    width:150px
                    height:28px
                    margin-bottom:20px

                }
                .content{
                    .message{
                        .tit{
                            width:300px !important
                            // height:28px
                            margin-bottom:20px
                        }
                        .descript{
                             margin-bottom:20px
                        }
                    }
                }
            }
        }
    }
}
    .crystal
    img 
        width:100%
        height:100%
        .retail
            margin: 100px auto
            width:983px
            height:983px
            position:relative
        .up
            width:100%
            z-index:1
            position:absolute
            left:0
            top:0
        .down
            width:960px
            height:960px

            z-index:2
            position:absolute
            top: 50%
            left: 50%
            transform:translate(-50%,-50%)
        .wrap
            width:983px
            height:900px
            margin:0 auto
            position:relative
            .graphical
                display:flex
                flex-direction: column

                .title
                    width:147px
                    height: 29px
                    position:relative
                    &:before
                        content:''
                        display:block
                        position:absolute
                        left:0
                        top:40px
                        width:745px
                        height:2px
                        background-color:#7D58E3
                .content
                    display:flex
                    flex-direction: column
                    .message,.target,.intelligence
                        margin-top:50px
                        display:flex
                        flex-direction: column
                        .tit
                            width:250px
                            height: 18px
                            margin-top:30px
                        .descript
                            width:720px
                            margin-top:20px
                            font-size:18px
                            line-height:25px
                            color:#424C8F
                            letter-spacing:1px
            .crystal_bg
                position:absolute
                right: -38px;
                top: 148px;
        

</style>